<template>
    <view class="contentTitle">
        <view class="content">
            <view class="contentItem2">
                <text class="contentItemText" v-show=" !createdNum===30">注:该设备截止有效期({{expire_time}})还剩 30 天 ,请提前缴费</text>
            </view>
            <view class="contentItem">
                <text class="contentItemText">公司:</text>
                <view>
                    <input class="uni-input" @blur="onKeyInput" :value=" company_name" disabled=ture />
                </view>
            </view>
            <view class="contentItem">
                <text class="contentItemText">公司设备:</text>
                <view>
                    <input class="uni-input" @blur="onKeyInput2" disabled=ture :value="equipment_name" />
                </view>
            </view>
            <view>
                <text style="font-size:38rpx; margin-left:15rpx">
                    开通时长:
                </text>
                <view v-for="(item,index) in array" :key="index" class="selectS">
                    <view class="selectCombo" @tap="bindSelectCombo(index,item)" :class="{act:index === current}">
                        <view style="color:#ffe3b9;font-size:50rpx;margin-right:5rpx;">¥{{item.cost}}元{{item.duration}}{{item.date_unit == 1 ? '个月' 
                        : '年'}}</view>
                        <view style="color:#faa5a8;font-size:35rpx"><texe style="text-decoration:line-through;">{{item.price}}元{{item.duration}}{{item.date_unit == 1 ? '个月' 
                        : '年'}}</texe>
                        </view>
                    </view>
                </view>
            </view>
            <view class="contentItem">
                <text class="contentItemText">套餐名称:</text>
                <view class="uni-input" style="margin-top:25rpx ;color:#ccc;">
                    <view @tap="changeShow('QS_Picekr_custom2_1')" class="pickers">{{set_meal_name}}</view>
                    <!-- <img src="../../../../static/images/icon/下拉.png"></img> -->
                    <QSpicker type="custom2" ref="QS_Picekr_custom2_1" pickerId="custom2_1" :dataSet="custom2Set_1" showReset @hideQSPicker="hideQSPicker($event)" @showQSPicker="showQSPicker($event)" @confirm="confirm($event)" />
                </view>
            </view>
            <view class="contentItem">
                <text class="contentItem-money">
                    <text class="t">计费金额:</text>
                    <text class="contentItem-right">{{cost}}</text>元
                </text>
            </view>
            <!-- <view class="contentItem">
                <text class="contentItem-msg" style="z-index:0">*缴费信息:套餐费为{{set_meal_fee}}元/年,用户为{{account_fee}}元/年/人</text>
            </view> -->
            <button class="unibutton" @tap="bindEnterChange2">确认支付</button>
        </view>
    </view>
</template>

<script>
import {
    uniIcon
} from '@dcloudio/uni-ui';
import {
    request
} from "../../../../comon/js/request.js"
import QSpicker from "../../../../components/QuShe-picker/QuShe-picker"
export default {
    data() {
        return {
            cost: 0,
            createdNum: 30,
            expire_time: "",
            equipment_name: "",
            company_name: "",
            current: 0,
            id: "",
            set_meal_item_id: "",
            array: [],
            set_meal_name: "请选择套餐",
            set_meal_id: "",
            account_number: "",
            extension_time: "",
            account_fee: "",
            set_meal_fee: "",
            oid: "",
            allMoney: "",
            custom2Set_1: {
                itemArray: [
                    [{
                        title: "", //name变量名需与下方steps.steps_1_value相同
                        value: "" //可添加多项自定义想要的数据
                    }],
                ],
                steps: {
                    step_1_value: "title", //第一级显示的属性名
                },
                defaultValue: [0, 0] //初始数据
            },
        }
    },
    onLoad(options) {
        this.id = options.id
        this.oid = options.oid
        var openid = uni.getStorageSync("wx_openid")
        // console.log(this.oid, "有订单id嘛~~~~~~~~~~~", options.company_name, options.equipment_name)
        this.company_name = options.company_name
        this.equipment_name = options.equipment_name
        this.expire_time = options.expire_time
        this.setMealAll()
    },
    computed: {
        // 计算属性的 getter
        calculate() {
            // `this` 指向 vm 实例
            return this.allMoney = this.account_fee * this.account_number + this.set_meal_fee * this.extension_time
            console.log(this.allMoney)
        }
    },
    methods: {
        //选择套餐
        bindSelectCombo(index, item) {
            this.current = index;
            this.cost = item.cost
            this.set_meal_item_id = item.id
            console.log(item)
            console.log(this.cost)
            console.log(this.set_meal_item_id)
        },
        onKeyInput: function (event) {
            this.account_number = event.target.value
        },
        onKeyInput2: function (event) {
            this.extension_time = event.target.value

        },
        changeTab(index) {
            console.log(1111111)
        },
        changeShow(name) {
            this.$refs[name].show();
        },
        showQSPicker(res) {
            console.log(`pickerId为${res.pickerId},  类型为${res.type}的QS-picker显示了`);
        },
        hideQSPicker(res) {
            console.log(`pickerId为${res.pickerId},类型为${res.type}的QS-picker隐藏了了`);
        },
        confirm(res) {
            console.log('获取了用户选择----->' + JSON.stringify(res));
            this.set_meal_name = res.data[0].title;
            this.account_fee = res.data[0].account_fee;
            this.set_meal_fee = res.data[0].set_meal_fee;
            this.array = res.data[0].item
            this.cost = res.data[0].item[0].cost
            this.set_meal_id = res.data[0].item[0].set_meal_id
            this.set_meal_item_id = res.data[0].item[0].id
            console.log('获取了用户选择----->', res);
            console.log(this.set_meal_id, "套餐ID")
            console.log(this.set_meal_item_id, "时长")
        },
        bindPickerChange: function (e) {
            console.log('picker发送选择改变，携带值为', e.target.value)
            this.index = e.target.value
        },
        // 确认支付
        bindEnterChange2() {
            console.log(1111111111111)
            console.log(this.oid, "oid订单ID")
            console.log(this.set_meal_id, "this.set_meal_id套餐ID")
            console.log(this.set_meal_item_id, "this.set_meal_item_id缴费时长")
            console.log(uni.getStorageSync("wx_openid"), "uni.getStorageSync")
            if (!uni.getStorageSync("wx_openid")) {
                uni.showModal({
                    title: '支付失败,当前账号未绑定微信或该账号绑定不是本人微信',
                    showCancel:false
                });
            } else {
                request({
                    url: "v1/payment/miniappPayment",
                    method: "GET",
                    data: {
                        oid: this.oid,
                        set_meal_id: this.set_meal_id,
                        set_meal_item_id: this.set_meal_item_id,
                        openid: uni.getStorageSync("wx_openid")
                    }
                }).then(res => {
                    console.log(res, "调起微信支付")
                    let nonceStr1 = res.data.result.nonceStr
                    let timeStamp1 = res.data.result.timeStamp
                    let package1 = res.data.result.package
                    let signType1 = res.data.result.signType
                    let paySign1 = res.data.result.paySign
                    // 调用微信支付
                    uni.requestPayment({
                        timeStamp: timeStamp1,
                        nonceStr: nonceStr1,
                        package: package1,
                        signType: signType1,
                        paySign: paySign1,
                        success: function (res) {
                            console.log('支付成功:' + JSON.stringify(res));
                        },
                        fail: function (err) {
                            console.log('支付失败:' + JSON.stringify(err));
                        }
                    });
                })
            }
            console.log("点击确定")
        },

        //获取套餐所有信息
        setMealAll() {
            let than = this
            request({
                url: `v1/SetMeal/all?id=${this.id}`,
                method: "GET",
            }).then(res => {
                console.log(res, "resresresresresresresresresresresresresresres")
                than.custom2Set_1.itemArray[0] = res.data.result
                than.custom2Set_1.itemArray = [res.data.result]
                console.log(than.custom2Set_1.itemArray[0], "youm!~~~~~~~~~~~~~~~~~~~~", res.data.result)
            })
        },
    },
    components: {
        uniIcon,
        QSpicker,
    }
}
</script>

<style lang="less">
page {
    background: #eff1f3;
}

.act {
    background-image: linear-gradient(-180deg, #f34151 0%, #f34151 100%);
}

.selectS {
    // display: flex;
    // justify-content:space-around

    .selectCombo {
        line-height: 90rpx;
        align-content: center;
        position: relative;
        margin: 30rpx auto;
        display: flex;
        justify-content: center;
        width: 600rpx;
        height: 90rpx;
        border: 1rpx solid #d7d7d7;
        border-radius: 25rpx;
    }
}

.t {
    font-size: 28rpx;
    margin-right: 10rpx;
}

img {
    width: 45rpx;
    height: 45rpx;
    position: absolute;
    top: 100rpx;
    left: 220rpx;

}

.contentTitle {
    .content {
        border-radius: 1%;
        margin-top: 20rpx;
        margin-left: 5%;
        width: 686rpx;
        height: 1160rpx;
        background: #ffffff;

        .contentItem2 {
            text-align: center;
            margin-top: 20rpx;
            height: 50rpx;
        }

        .contentItem {
            margin-top: 20rpx;
            height: 180rpx;

            .pickers {
                margin-top: 25rpx;
                position: relative;
                color: #656565;
                width: 100%;

                .uni-icon {
                    position: absolute;
                    top: 11rpx;
                    left: 590rpx;
                    line-height: 60rpx;

                }
            }

            .contentItemText {
                margin-top: 30rpx;
                font-size: 40rpx;
                color: #353535;
                margin-left: 15rpx;
            }

            .uni-input {
                margin-left: 15rpx;
                // line-height: 80rpx;
                font-size: 30rpx;
                width: 650rpx;
                height: 80rpx;
                background: #EFF0F3;
                display: flex;
                border-radius: 2%;
                padding-left: 10rpx;
            }
        }
    }
}

.contentItem-money {
    margin-top: 20rpx;
    display: flex;
    justify-content: flex-end;
    font-size: 28rpx;
    margin-right: 28rpx;
    border-bottom: 1rpx dashed #ccc;
    height: 80rpx;

}

.contentItem-right {
    color: red;
    font-size: 30rpx;
}

.contentItem-msg {
    position: relative;
    top: -30rpx;
    // border-top: 1rpx dashed #ccc;
    display: flex;
    justify-content: center;
    font-size: 23rpx;
    color: #656565;
}

.unibutton {
    position: relative;
    top: -85rpx;
    background: #0C69A4;
    color: white;
}
</style>
